<header id="header">
  <div class="header_main">
    <div class="visible-xs-12 hidden-sm hidden-md hidden-lg phones phones-login " style="" (click)="loginBox()" *ngIf="nickname==null">
      登录
    </div>
    <div class="visible-xs-12 hidden-sm hidden-md hidden-lg phones" *ngIf="nickname">
      <div class="logout-box log-info-box" (click)="logout()">登出</div>
      <div class="nickname-box log-info-box" (click)="userInfo()">{{nickname}}</div>
    </div>
    <div class="container">
      <div class="row">
        <div class="site-name col-xs-12 col-sm-2">
          <a id="logo" href="home" title="精品MAC应用分享">
            <img src="../../../assets/images/biedengtushu.png">
          </a>
        </div>
        <div class="site-socials col-sm-10 col-xs-12">
          <div class="socials hidden-xs pc" (click)="loginBox()" *ngIf="nickname==null">
            登录
          </div>
          <div class="socials hidden-xs pc" *ngIf="nickname">
            <div class="logout-box log-info-box" (click)="logout()">登出</div>
            <div class="nickname-box log-info-box" (click)="userInfo()">{{nickname}}</div>
          </div>
          <div class="row">
            <div class="col-md-7 col-sm-6 col-xs-12">
              <nav id="nav-menu" class="clearfix" role="navigation">
                <a class="nav-item col-xs-2 col-md-2 col-xs-offset-1 nav-home" routerLink="/">首页</a>
                <a class="nav-item col-xs-3 col-md-2 nav-book" routerLink="/">图书库</a>
                <a class="nav-item col-xs-3 col-md-2 nav-wishlist" routerLink="wish">心愿单</a>
                <a class="nav-item col-xs-2 col-md-2 nav-feedback" routerLink="comments">留言</a>
              </nav>
            </div>
            <div class="col-md-5 col-sm-6 col-xs-12 head_search">
              <div id="search" role="search">
                <label class="sr-only">搜索关键字</label>
                <span class="input_wrap"><input type="text" class="text" [(ngModel)]="bookKey" placeholder="搜索"></span>
                <input type="hidden" name="t" value="soft">
                <button type="button" class="submit" (click)="search()">搜 索</button>
              </div>
            </div>
          </div>
        </div>
      </div><!-- end .row -->
    </div>
  </div>

  <div class="logins" *ngIf="loginBoxStatus">
    <div class="login col-md-4 col-sm-6 col-xs-10">
      <div class="m-t" role="form" action="index.html">
        <div class="form-group">
          <input type="email" class="form-control" [(ngModel)]="email" placeholder="邮箱" required="required">
        </div>
        <div class="form-group">
          <input type="password" class="form-control" [(ngModel)]="pwd" placeholder="密码" required="required">
        </div>
        <button type="button" class="btn btn-primary block full-width m-b" (click)="login()">登 录</button>
        <p class="text-muted text-center">
          <a href="login.html#">
            <small>忘记密码了？</small>
          </a> | <a href="/register">注册一个新账号</a>
        </p>
        <div class="hiddens" (click)="hiddenLoginBox()"></div>
      </div>
    </div>
  </div>

</header>
